<template>
  <div class=" home_content">
    <p>大数据全网搜索</p>
    <ul class="content_ul">
      <li><i></i>热度分析</li>
      <li><i></i>情感分析</li>
      <li><i></i>来源分析</li>
      <li><i></i>趋势分析</li>
    </ul>
    <div class="content-input">
      <el-input v-model.trim="input" placeholder="人名、企业名或事件关键词" clearable size="medium"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchKey">搜索</el-button>
    </div>
    <div class="content-row">
      <search-table></search-table>
    </div>
  </div>
</template>

<script>
  import searchTable from '../components/searchTable'

  export default {
    name: "home",
    data() {
      return {
        input: ''
      }
    },
    components: {
      searchTable
    },
    methods: {
      searchKey() {
        if (this.input == '') {
          this.$alert('请输入要搜索的词', '温馨提示', {
            confirmButtonText: '确定',
          })
        } else {
          this.$router.push({path: '/searchResult', query: {searchName: this.input}});
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../style/mixin.less";

  .home_content {
    text-align: center;
    background-color: #fff;
    min-height: 100%;
    p {
      font-size: 26px;
      padding-top: 20px;
      padding-bottom: 10px;
    }
    .content_ul {
      width: 360px;
      margin: 0 auto;
      overflow: hidden;
      li {
        position: relative;
        width: 25%;
        float: left;
        i {
          position: absolute;
          left: 0;
          top: 50%;
          width: 8px;
          height: 8px;
          margin-top: -4px;
          background: url("../assets/circle.png") no-repeat center;
        }
      }
    }
    .content-input {
      overflow: hidden;
      margin-top: 10px;
      .el-input {
        width: 600px;
      }
    }
    .content-row {
      padding: 30px 40px;
      overflow: hidden;
    }
  }
</style>
